import React from "react";
import type { ToastItem } from "../hooks/useToasts";
import Snackbar from "@mui/material/Snackbar";
import Alert from "@mui/material/Alert";

interface Props {
  toasts: ToastItem[];
  onClose?: (id: string) => void;
}

export default function ToastContainer(props: Props) {
  const { toasts, onClose } = props;
  return (
    <>
      {toasts.map((t) => (
        <Snackbar
          key={t.id}
          open
          anchorOrigin={{ vertical: "top", horizontal: "center" }}
          autoHideDuration={3000}
          onClose={() => onClose?.(t.id)}
          sx={{ zIndex: 10101 }}
        >
          <Alert
            onClose={() => onClose?.(t.id)}
            severity={t.type}
            variant="filled"
            sx={{ width: "100%" }}
          >
            {t.message}
          </Alert>
        </Snackbar>
      ))}
    </>
  );
}


